<template>
  <!--   推荐一行每一个分类的数据展示 -->
  <div class="category-content">
    <!--    每一个分类的数据展示(轮播图)-->
    <van-swipe :autoplay="6000" lazy-render style="height: 148px">
      <van-swipe-item v-for="banner in  bannerList" :key="banner.extra.resourcesId">
        <a :href="banner.targetUrl">
          <img style="width: 100%; height: 148px" :src="banner.picUrl"/>
        </a>
      </van-swipe-item>
    </van-swipe>
    <!--    每一个分类的数据展示(商品列表)-->
    <div class="category-item-container" v-for="categoryItem in categoryItemList" :key="categoryItem.category.id">
      <!--        办公椅那个标题-->
      <p class="name">{{ categoryItem.category.name }}</p>
      <!--        久坐不累描述-->
      <p class="front-name">{{ categoryItem.category.frontName }}</p>
      <!--        下面每一个商品列表-->
      <ul class="good-list">
        <!--          每一个商品信息-->
        <li @click="jumpDetail(item.id)" class="good-item" v-for="item in categoryItem.itemList" :key="item.id">
          <!--            每一个图片-->
          <img class="good-img" v-lazy="item.listPicUrl"/>
          <!--            图片的名称描述-->
          <p class="good-name">{{ item.name }}</p>
          <div class="good-price">
            <!--              商品到手价格前缀：到手价-->
            <span
                class="prefix"
                v-if="item.finalPriceInfoVO.priceInfo.finalPrice"
                v-text="item.finalPriceInfoVO.priceInfo.finalPrice.prefix"/>
            <!--              到手价格符号-->
            <span class="symbol">¥</span>
            <!--              商品真实到手价格-->
            <span
                class="price"
                v-if="item.finalPriceInfoVO.priceInfo.finalPrice"
                v-text="item.finalPriceInfoVO.priceInfo.finalPrice.price"/>
            <!--              商品真实到手价格(没有前缀到手价文字之后的真实价格)-->
            <span class="price" v-else v-text="item.finalPriceInfoVO.priceInfo.basicPrice"/>
            <!--              价格后缀：起-->
            <span
                class="prefix"
                v-if="item.finalPriceInfoVO.priceInfo.finalPrice"
                v-text="item.finalPriceInfoVO.priceInfo.finalPrice.suffix"/>
            <!--              商品专柜，没折扣价格-->
            <span
                class="counter"
                v-if="item.finalPriceInfoVO.priceInfo.counterPrice"
                v-text="`¥${item.finalPriceInfoVO.priceInfo.counterPrice}`"/>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant";
import {getCategoryData} from "@/api/Home";

export default {
  name: "HomeCategoryContent",
  props: ['categoryId'],
  data() {
    return {
      bannerList: [],
      categoryItemList: [],
    }
  },
  watch: {
    categoryId: {
      immediate: true,
      handler() {
        console.log(`请求分类${this.categoryId}数据`);
        getCategoryData(this.categoryId).then((response) => {
          // 打印轮播图数据
          this.bannerList = response.data.currentCategory.bannerList;
          // 打印商品名称，最终价数据
          this.categoryItemList = response.data.categoryItemList;
        });
      }
    }
  },
  methods: {
    jumpDetail(goodsId) {
      Toast(`打开的商品是${goodsId}`);
    }
  }
}
</script>

<style scoped lang="less">
p {
  margin: 0;
}

.category-content {
  background-color: rgb(238, 238, 238);
  padding-bottom: 50px;
}

.category-item-container {
  margin-top: 10px;
  background: white;

  .name {
    font-size: 16px;
    line-height: 1;
    text-align: center;
    padding-top: 12px;
  }

  .front-name {
    font-size: 12px;
    margin-top: 8px;
    color: #999;
    padding-bottom: 12px;
    text-align: center;
  }

  .good-list {
    overflow: hidden;
    padding-right: 10px;

    .good-item {
      width: 50%;
      float: left;
      padding-left: 10px;
      padding-bottom: 26px;
      box-sizing: border-box;

      .good-img {
        width: 100%;
        height: 172.5px;
        border-radius: 8px;
        background-color: #f4f4f4;
      }

      .good-name {
        font-size: 15px;
        margin-top: 8px;
        line-height: 22.5px;
        text-align: left;
        font-weight: 500;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #12161c;
        font-family: PingFangSC-Regular;
      }

      .good-price {
        .prefix {
          font-size: 12px;
          font-weight: 700;
          color: #fa1e32;
        }

        .symbol {
          font-size: 12px;
          color: rgb(250, 30, 50);
          font-weight: bold;
        }

        .price {
          font-size: 20px;
          color: rgb(250, 30, 50);
          font-weight: bold;
        }

        .counter {
          font-size: 12px;
          text-decoration: line-through;
          color: rgb(153, 153, 153);
          font-weight: 300;
          margin-left: 2px;
        }
      }
    }
  }
}
</style>
